<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start" *ngIf="showIcon">
            <ion-button appDebounceClick (debounceClick)="doDiss()">
                <img src="assets/img/close.png" class="backBtnStyle">
            </ion-button>
        </ion-buttons>
        <ion-title class="commonTitleText">{{modalTitle}}</ion-title>
    </ion-toolbar>
    <ion-toolbar style="--border-width: unset;">
        <ion-searchbar placeholder="搜索城市" autocomplete="on" [(ngModel)]="key" (ionFocus)="focusInput()"
            (ionBlur)="ionBlur()"></ion-searchbar>
    </ion-toolbar>
</ion-header>
<div class="tab">
    <div class="tab_slideBox">
        <span [ngClass]="{'check_bold': !isShow}" class="tab_text">国内(含港澳台)</span>
        <div [ngClass]="{'check': !isShow}"></div>
    </div>
    <div class="tab_slideBox" *ngIf="submit?.content?.needChildren !== undefined">
        <span [ngClass]="{'check_bold': isShow}" class="tab_text">{{currentCityTab}}区县</span>
        <div [ngClass]="{'check': isShow}"></div>
    </div>
</div>
<ion-content *ngIf="!isShow">
    <ion-index-list [hasTop]="true" [hasPostion]="true">
        <div class="city" *ngIf="entryType!== 100">
            <nav class="city_nav">
                <div class="city_tip">
                    <span id="choose_current_city_label_id">当前定位城市：</span>
                    <span class="curr_location_span">{{currentCity.name}}市</span>
                </div>
            </nav>


            <section id="choose_hot_city_sec" class="hot_city_container">
                <ng-container *ngIf="hotCities && hotCities.length > 0">
                    <div class="city_title">
                        <span>热门城市</span>
                    </div>
                    <ul class="citylistul clear">
                        <li *ngFor="let hotCity of hotCities"
                            style="justify-content: center;  display: flex;align-items: center;">
                            <div class="curr_div_location" appDebounceClick (debounceClick)="doClose(hotCity)">
                                {{hotCity?.n}}
                            </div>
                        </li>
                    </ul>
                    <div style="clear: both"></div>
                </ng-container>
            </section>
        </div>
        <div *ngFor="let group of groupCities">
            <ion-index-section [index]="group.l" *ngIf="(group.c|filter:key).length > 0" >
                <ion-index-cell [mSelect]="false" *ngFor="let city of group.c | filter:key; last as last">
                    <ion-item detail="false" class="city_item" [lines]="inset" appDebounceClick (debounceClick)="doClose(city)">
                        <ion-label>
                            <h2>{{city?.n}}</h2>
                        </ion-label>
                    </ion-item>
                </ion-index-cell>
            </ion-index-section>
        </div>
    </ion-index-list>
</ion-content>

<ion-content *ngIf="isShow">
    <div class="area">
        <ng-container *ngFor="let item of areaList; let i = index;">
            <span class="area-item" appDebounceClick (debounceClick)="areaClick(item)">{{item.name}}</span>
        </ng-container>
    </div>
</ion-content>